<template>
  <card-vue title="站点统计">
    <i class="el-icon-s-data" slot="title-icon"></i>
    <ul slot="body" class="count-wrap">
      <li v-for="(item,k) in countList" :key="k">
        <span>{{item.name}}</span>
        <span>{{item.content}}</span>
      </li>
    </ul>
  </card-vue>
</template>

<script>
  export default {
    name: "countVue",
    data() {
      return {
        countList: [
          {name: "标签：", content: "132个"},
          {name: "文章：", content: "134篇"},
          {name: "页面：", content: "7个"},
          {name: "评论：", content: "1486条"},
          {name: "分类：", content: "20个"},
          {name: "最后更新：", content: "2019-10-22"},
        ],
      }
    },
    methods: {}
  }
</script>

<style lang="less" scoped>
  .count-wrap {
    display: flex;
    flex-wrap: wrap;

    li {
      width: 50%;
      line-height: 2;

      &:nth-child(odd) {
        width: 40%;
      }

      &:nth-child(even) {
        width: 60%;
      }
    }
  }
</style>
